<div th:fragment="atmBoLeft">

    <div id="boLeft">
        <el-menu
                class="el-menu-vertical-demo">

            <el-submenu v-for="firstMenu in userMenus" :index="firstMenu.id">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>{{firstMenu.powerValue}}</span>
                </template>
                <el-menu-item v-for="secondMenu in firstMenu.child" :index="secondMenu.id">
                    <a :href="secondMenu.url">{{secondMenu.powerValue}}</a>
                </el-menu-item>
            </el-submenu>
        </el-menu>
    </div>

    <script>
        new Vue({
            el : '#boLeft',
            data : {
                userMenus : []
            },
            created : function () {
                this.loadMyMenu();
            },
            methods : {
                loadMyMenu : function() {
                    var that = this;
                    $.ajax({
                        type : 'POST',
                        dataType : 'JSON',
                        url : '/user/loadMenu',
                        data : {
                        },
                        success : function (result) {
                            if (result.code != 1000){
                                alert(result.message);
                                return;
                            }

                            that.userMenus = result.data;
                        }
                    });
                }
            }
        });
    </script>

</div>